<template>
  <div class="list" @click="fn">
    <div>
      <span class="mu">{{title}}</span>
    </div>
    <div class="right">
      <slot name="default"></slot>
      <span>{{value}}</span>
      <span v-if="!isLink"> > </span>
    </div>
  </div>
</template>

<script>
/**
 * 调用组件方式
 * <list title=""  value =""  isLink @listclick=""> 右边特殊节点 </list>
 * 属性
 *  title:左边标题
 *  value:右边的文字
 *  isLink:是否需要 >
 * 事件：
 * listclick    点击事件
 * 
 */
export default {
  props: {
    title: String,
    value: String,
    isLink: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },

  mounted() { },

  methods: {
    fn() {
      this.$emit("listclick")
    }
  },
};
</script>

<style lang="scss" scoped>
.mu {
  font-size: 30px;
  font-weight: 500;
}

.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 100px;
    height: 80px;
    border-radius: 50%;
    vertical-align: bottom;
  }

  ;

  .right {
    span {
      font-size: 30px;
      line-height: 80px;
      color: #999;
    }
  }

  border-bottom: 1px solid #999;
}
</style>